<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>费用管理系统 - 仪表板</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .modal {
            display: none;
        }
        .modal.show {
            display: flex;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center">
                    <h1 class="text-xl font-bold text-gray-800">费用管理系统</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-gray-600">欢迎，<span id="username"></span></span>
                    <button id="logoutBtn" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition-colors">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <div class="max-w-7xl mx-auto px-4 py-8">
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700 mb-2">总费用</h3>
                <p class="text-3xl font-bold text-blue-600" id="totalAmount">¥0.00</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700 mb-2">费用项目</h3>
                <p class="text-3xl font-bold text-green-600" id="totalItems">0</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700 mb-2">费用类别</h3>
                <p class="text-3xl font-bold text-purple-600" id="totalCategories">0</p>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="mb-6">
            <button id="addExpenseBtn" class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
                添加费用
            </button>
        </div>

        <!-- 费用列表 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-gray-800">费用列表</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类别</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属徒步</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody id="expenseTableBody" class="bg-white divide-y divide-gray-200">
                        <!-- 数据将在这里动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 添加/编辑费用模态框 -->
    <div id="expenseModal" class="modal fixed inset-0 bg-gray-600 bg-opacity-50 items-center justify-center z-50">
        <div class="bg-white p-6 rounded-lg shadow-xl w-full max-w-md mx-4">
            <h3 id="modalTitle" class="text-lg font-semibold text-gray-800 mb-4">添加费用</h3>
            <form id="expenseForm" class="space-y-4">
                <input type="hidden" id="expenseId">
                <div>
                    <label for="category" class="block text-sm font-medium text-gray-700 mb-1">类别</label>
                    <select id="category" name="category" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">请选择类别</option>
                        <option value="摄影设备类">摄影设备类</option>
                        <option value="配件类">配件类</option>
                        <option value="徒步装备类">徒步装备类</option>
                        <option value="交通类">交通类</option>
                        <option value="住宿类">住宿类</option>
                        <option value="餐饮类">餐饮类</option>
                    </select>
                </div>
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
                    <input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div>
                    <label for="cost" class="block text-sm font-medium text-gray-700 mb-1">金额</label>
                    <input type="number" id="cost" name="cost" step="0.01" min="0" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div>
                    <label for="trip" class="block text-sm font-medium text-gray-700 mb-1">所属徒步</label>
                    <select id="trip" name="trip" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">请选择徒步</option>
                        <option value="通用">通用</option>
                        <option value="J3">J3</option>
                        <option value="J4">J4</option>
                    </select>
                </div>
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" id="cancelBtn" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button type="submit" id="saveBtn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="dashboard.js"></script>
</body>
</html>